<template>
  <div>
    <s-header :name='"注册"' :back='"/home"' />
    <div class="logo">
      <img  src="../../assets/logo.png" />
    </div>
    
    <van-form @submit="handleRegister">
      <van-field
        v-model="registerForm.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="registerForm.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        autocomplete
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="registerForm.confirmPassword"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="确认密码"
        autocomplete
        :rules="[{ required: true, message: '请再次确认密码' }]"
      />
      <van-field
        v-model="inputCode"
        center
        clearable
        label="验证码"
        placeholder="输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <div @click="refreshCode()">
            <SIdentify :identifyCode="identifyCode" />
          </div>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <router-link to="/login">
          <div class="text">
            已有帐号，去登录
          </div>
        </router-link>
        
        <van-button round block type="info" native-type="submit" color="linear-gradient(to right, #ff6034, #ee0a24)">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

import SIdentify from "@/components/SIdentify";
import  sHeader  from '@/components/SHeader';
import  { register }  from '@/api/user';
import { Toast } from 'vant';


export default {
  name: 'registerView',
  components: {
    SIdentify,
    sHeader,
  },
  data() {
    return {
      registerForm: {},
      inputCode: '',
      identifyCode: '',// 验证码
      identifyCodes: '1234567890abcdwerwshdjepJKDHRJHKPLMKQBWP',//验证码随机范围
    }
  },
  mounted() {
    //组件挂载完毕刷新验证码
    this.identifyCode = ''
    console.log(1);
    this.makeCode(this.identifyCodes, 4)
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    handleRegister() {
      if (this.inputCode.toLowerCase() !== this.identifyCode.toLowerCase()) {
        Toast.fail('请填写正确验证码')
        this.refreshCode()
        return
      }
      if(this.registerForm.password != this.registerForm.confirmPassword){
        Toast.fail('两次密码不一致')
        return
      }
      try {
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭，它会被后续的toast覆盖
        overlay: true, // 整体添加一个遮罩
        message: '加载中...'
      })
      register({username: this.registerForm.username, password: this.registerForm.password}).then(res =>{
          if(res.code === 200){
            this.$router.push({ path: '/login' })
            this.$toast.success('注册成功')
          }
      })
      // this.$store.dispatch('user/login', this.registerForm).then(() => {
      //     this.$router.push({ path: this.redirect || '/' })
      //     this.$toast.success('登录成功')
      // })
      } catch(err) {
        this.$toast.fail('注册失败' + err)
      }
      
    },
    // 验证码点击刷新方法
    refreshCode() {
        this.identifyCode = ''
    // 4位验证码可以根据自己需要来定义验证码位数
        this.makeCode(this.identifyCodes, 4)
    }, 
    // 随机数
    randomNum(min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode(data, len) {
        for (let i = 0; i < len; i++) {
            this.identifyCode += data[this.randomNum(0, data.length - 1)]
        }
    }
  }
}
</script>

<style>
  .logo {
    width: 175px;
    margin: 0 auto;
  }
  .block {
    height: 50px;
  }
  .text {
    /* padding-left: 20px; */
    padding-bottom: 10px;
    font-size: 12px;
    color: rgb(0, 102, 255);
  }
</style>